<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeType">
        <a-tab-pane key="1" title="基本信息">
          <card title="基本信息">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="同行名称">{{ supplierInfo.industryName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="省/市">
                <template v-if="!supplierInfo.provinceName">
                  {{ '-' }}
                </template>
                <template v-else>{{ supplierInfo.provinceName }}/{{ supplierInfo.cityName }}</template>
              </a-descriptions-item>
              <a-descriptions-item label="地址">{{ supplierInfo.address || '-' }}</a-descriptions-item>
            </a-descriptions>
          </card>
          <card title="同行联系人">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="姓名">{{ supplierInfo.contactName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="手机号">{{ supplierInfo.contactPhone || '-' }}</a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
            </a-descriptions>
          </card>
          <card title="发票信息">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="抬头">{{ supplierInfo.invoiceCompanyName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="发票类型">{{ supplierInfo.invoiceTypeStr || '-' }}</a-descriptions-item>
              <a-descriptions-item label="纳税人识别号">{{ supplierInfo.invoiceNumber || '-' }}</a-descriptions-item>
              <a-descriptions-item label="地址">{{ supplierInfo.invoiceAddress || '-' }}</a-descriptions-item>
              <a-descriptions-item label="电话">{{ supplierInfo.invoicePhone || '-' }}</a-descriptions-item>
            </a-descriptions>
          </card>

          <!-- 银行账号 -->
          <BankAccountDetail :data="supplierInfo.backInfoList" />

          <card title="合同信息">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <!-- <a-descriptions-item>
          <UploadImg disabled :single="true" :modelValue="supplierInfo.contractFileIdStr" title="合同协议" />
        </a-descriptions-item> -->
              <a-descriptions-item label="合同协议">
                <template v-if="supplierInfo.contractFileIdStr">
                  <div class="view-file-link" @click="viewFileFn(supplierInfo)">点击查看</div>
                </template>
              </a-descriptions-item>
              <a-descriptions-item label="合同有效期">
                {{ supplierInfo.contractBeginDate ? supplierInfo.contractBeginDate + '至' + supplierInfo.contractEndDate : '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
            </a-descriptions>
          </card>

          <card title="结算日配置">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item :span="1" label="结算方式">
                {{ supplierInfo.settlementPlanStr || '-' }}
                <template v-if="supplierInfo.settlementPlan && supplierInfo.settlementPlan !== 10 && supplierInfo.settlementDay">
                  |&nbsp;&nbsp;{{ supplierInfo.settlementDay }} 日，进行结算
                </template>
              </a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
            </a-descriptions>
          </card>
        </a-tab-pane>
        <a-tab-pane key="2" title="操作记录">
          <OperateLog :id="route.params.id" type="18" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 预览pdf -->
    <pdf-viewer
      :url="pdfViewInfo.url"
      :title="pdfViewInfo.title"
      v-model:visible="pdfViewInfo.show"
      @close="Object.assign(pdfViewInfo, { ...PDFDefaultAttr })"
    />
    <!-- 图片预览组件 -->
    <a-image-preview :src="previewUrl" v-model:visible="previewVisible" />
  </div>
</template>

<script setup lang="ts" name="PeerDetail">
  import { reactive, ref, onMounted } from 'vue'
  import { getPeerDetail } from '@/api/market/peer'
  import { useRoute } from 'vue-router'
  import BankAccountDetail from '@/views/market/components/bank-account-detail.vue'
  // pdf预览
  import { PDFDefaultAttr } from '@/components/pdf-viewer/const'
  const pdfViewInfo = reactive({ ...PDFDefaultAttr })

  const route = useRoute()
  const loading = ref(false)
  const size = 'medium'
  const supplierInfo = reactive<any>({}) // 详情信息

  // 获取详情
  const getSupplierDetail = (id: string | string[]) => {
    loading.value = true
    getPeerDetail({ id }).then((res: any) => {
      const { result } = res
      Object.assign(supplierInfo, result)
    })
    console.log(supplierInfo)

    loading.value = false
  }

  // 图片预览
  const previewVisible = ref(false)
  const previewUrl = ref()
  const viewFileFn = (file) => {
    console.log(file)
    let fileName = file.contractFileName.split('.').pop().toLowerCase()
    // pdf预览
    // if (fileName == 'pdf') {
    //   Object.assign(pdfViewInfo, {
    //     url: file.contractFileUrl,
    //     title: file.contractFileName,
    //     show: true,
    //   })
    //   return
    // }
    // 图片预览
    if (['jpg', 'png'].includes(fileName)) {
      previewUrl.value = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${file.contractFileIdStr}`
      previewVisible.value = true
      return
    }

    let url = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${file.contractFileIdStr}`
    window.open(url)
  }

  onMounted(() => {
    const id = route.params.id
    getSupplierDetail(id)
  })
</script>

<style lang="less" scoped>
  .section-item + .section-item {
    margin-top: 16px;
  }

  .view-file-link {
    font-size: 14px;
    color: rgb(var(--primary-6));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
</style>
